<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">终端用户在线时长</div> 
      <div class="sn-body" style="bottom: 20px"> 
        <div class="wrap-container">

          <div class="table">
            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
              <tbody>
                <tr>
                  <td width="30%">
                    <span>终端名</span>
                  </td>
                  <td width="40%">
                    <span>最后一次接入日期</span>
                  </td>
                  <td width="30%">
                    <span>时长</span>
                  </td>
                </tr>
              </tbody>
            </table>

            <div class="seamless-warp">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                  <tbody>
                    <tr v-for="(item, index) in front" :key="index">
                      <td width="30%">
                        <span>{{ item.account }}</span>
                      </td>
                      <td width="40%">
                        <span>{{ item.accessTime }}</span>
                      </td>
                      <td width="30%">
                        <span>{{ item.time }}</span>
                      </td>
                    </tr>
                  </tbody>
              </table>
            </div>
            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                  <tr v-for="(item, index) in listData" :key="index">
                    <td width="30%">
                      <span>{{ item.account }}</span>
                    </td>
                    <td width="40%">
                      <span>{{ item.accessTime }}</span>
                    </td>
                    <td width="30%">
                      <span>{{ item.time }}</span>
                    </td>
                  </tr>
                </tbody>
            </table>
            </vue-seamless-scroll>
          </div>

        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: "seamless",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      timer: null,
      listData: [],
      front: []
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  computed: {
　　optionSetting () {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }, 
  methods: {
    getData() {
      const u = '/reception/bigScreen/queryTerminalUser';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.listData =  res.data.data.behind;
          this.front =  res.data.data.front;
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    timeStamp( second_time ) {  
        
      var time = parseInt(second_time) + "秒";  
      if( parseInt(second_time )> 60){  
        
        var second = parseInt(second_time) % 60;  
        var min = parseInt(second_time / 60);  
        time = min + "分" + second + "秒";  
          
        if( min > 60 ){  
          min = parseInt(second_time / 60) % 60;  
          var hour = parseInt( parseInt(second_time / 60) /60 );  
          time = hour + "小时" + min + "分" + second + "秒";  
    
          if( hour > 24 ){  
            hour = parseInt( parseInt(second_time / 60) /60 ) % 24;  
            var day = parseInt( parseInt( parseInt(second_time / 60) /60 ) / 24 );  
            time = day + "天" + hour + "小时" + min + "分" + second + "秒";  
          }  
        }  
      }  
      return time;          
    } 
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.sn-container {
 background: #FF4669;

  .table {
    .table-header {
      width: 100%;
      height: 35px;
      table-layout: fixed;
      tr {
        td {
          padding: 10px 5px;
          text-align: center;
          background-color: transparent;
          white-space: nowrap;
          overflow: hidden;
          color: #E2E5FF;
          font-size: 14px;
        }
      }
    }
    .seamless-warp {
      height: 100%;
      overflow: hidden;
      visibility: visible;
      .colorRed {
        color: #FF4669;
      }
      .colorOrange {
        color: #FFC956;
      }
      .item {
        height: auto;
        width: 100%;
        height: 35px;
        table-layout: fixed;
        tr {
          td {
            padding: 10px 5px;
            text-align: center;
            background-color: transparent;
            white-space: nowrap;
            overflow: hidden;
            color: #E2E5FF;
            font-size: 14px;
          }
        }
        tr {
          td {
            &.title {
              text-overflow: ellipsis;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
